<template>
	<view class="content">
		<view class="title">
			<view class="req-title">发布需求</view>
			<view class="req-title-desc">你想要发布什么类别的技术需求？</view>
		</view>
		
		<view class="req-item" v-for="(data, index) in requireList" :key='index' @click="clickItem(index)">
			<view class="">
				<view class="req-item-title">
					{{data.title}} </view>
				<view class="req-item-desc">
					委托研发生成新产品或者采购
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getNeedType} from '@/utils/apis.js';
	import {mapState,mapMutations} from 'vuex';
	
	export default {
		data() {
			return {
				
			}
		},
		onShow() {
			if(this.hasLogin){
				this.loadTypes();
			}
			else{
				uni.navigateTo({
					url: '/pagesA/login/login'
				});
			}
		},
		computed:{
			...mapState('requirementStore',['requireList']),
			...mapState('userStore',['hasLogin']),
		},
		methods: {
			...mapMutations('requirementStore',['saveTypes','saveTypeIndex']),
			loadTypes(){
				this.$request.get({
					url: 'queryNeedType',
					data: {},
				}).then(res => {
					this.saveTypes(res);
				}, res => {});
			},
			clickItem(index){
				this.saveTypeIndex(index);
				uni.navigateTo({
					url:"/pagesB/public-requirement/index"
				})
			}
		}
	}
</script>

<style>
	.content{
		background-color: #FAFAFA;
		height: 100%;
	}
	.title {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40upx 0;
		box-sizing: border-box;
	}
	.req-title{
		font-weight: bold;
		font-size: 42upx;
	}
	
	.req-title-desc{
		color: #333;
	}
	
	
	.req-item{
		/* height: 80upx; */
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: left;
		margin-top: 10px;
		padding: 30upx 0;
		box-sizing: border-box;
	}
	
	.req-item-title{
		color: #333333;
	}
	
	.req-item-desc{
		color: #999999;
		font-size: 24upx;
	}
</style>
